---
title: Astro 群島
description: "Astro 群島（別名：元件群島）是由 Astro 開創的 web 架構。「群島架構」一詞最早由 Etsy 的前端架構師 Katie Sylor-Miller 於 2019 提出，後由 Preact 作者 Jason Miller 延伸。"
i18nReady: true
---

import IslandsDiagram from '~/components/IslandsDiagram.astro';

Astro 開創並推廣了**群島**前端架構，打造更佳的前端效能，避免靠 JavaScript 產生所有內容的做法，並自動移除頁面中非必要的 JavaScript。開發者能把他們最喜歡的 UI 元件和框架帶來 Astro，而且仍然能享有前述好處。

## 歷史沿革

「元件群島」一詞最早由 Etsy 的前端架構師 [Katie Sylor-Miller](https://twitter.com/ksylor) 於 2019 提出，後由 Preact 作者 Jason Miller 於 2020 年 8 月 11 日[在這篇文章](https://jasonformat.com/islands-architecture/)延伸。

> 「群島」架構的構想看似簡單：在伺服器端渲染 HTML 頁面，接著在高度動態的區域周圍嵌入預留位置或插槽 [⋯⋯] 這些區域可在客戶端「注水」，形成各自獨立的小工具，重複使用最初由伺服器端渲染的 HTML。
> — Jason Miller，Preact 作者

這種架構與衍伸作法也稱作**部分水合作用（partial hydration）**或**選擇性水合作用（selective hydration）**。

對比之下，大部分以 JavaScript 為基礎的 web 框架則會渲染整個網站並為其注水，把網站當作一個巨大的 JavaScript 應用程式（也稱作單頁應用程式或 SPA）。SPA 簡潔且能做到許多事，但它高度依賴客戶端的 JavaScript，導致頁面載入效能不佳。

SPA 依舊存在發揮空間，甚至可以[嵌入到 Astro 頁面之中](/zh-tw/guides/migrate-to-astro/from-create-react-app/)。然而時至今日，其缺乏對選擇性注水（selectively hydrate）與策略性注水（strategically hydrate）的原生支援，儼然成為 web 開發時較拙劣的選擇。

拜 Sylor-Miller 提出的元件群島架構所賜，Astro 以首個內建選擇性水合作用的主流 JavaScript web 框架聞名。

## 什麼是 Astro 群島？

**一座 Astro「島嶼」指的是頁面中任一可互動的 UI 元件**。想像一座互動式小工具島嶼，座落在靜態、輕量、由伺服器端渲染的 HTML 汪洋中。

<IslandsDiagram>
  <Fragment slot="headerApp">頁首（互動式島嶼）</Fragment>
  <Fragment slot="sidebarApp">側邊欄（靜態 HTML）</Fragment>
  <Fragment slot="main">
    如文字、圖片等靜態內容。
  </Fragment>
  <Fragment slot="carouselApp">圖片輪播（互動式島嶼）</Fragment>
  <Fragment slot="footer">頁尾（靜態 HTML）</Fragment>
  <Fragment slot="source">出處：[Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
</IslandsDiagram>

島嶼之間相互獨立，且多座島嶼可以在同一個頁面並存。雖然獨立，但島嶼之間也能共享狀態，互相溝通。

這種彈性讓 Astro 支援多種 UI 框架，例如 [React](https://react.dev/)、[Preact](https://preactjs.com/)、[Svelte](https://svelte.dev/)、[Vue](https://vuejs.org/) 與 [SolidJS](https://www.solidjs.com/)。由於島嶼之間相互獨立，你甚至可以在各頁面混用多個框架。

:::tip
雖然大部分開發者習慣只使用單一 UI 框架，但 Astro 支援在同個專案使用多種框架。你能夠：

- 替每個元件選擇最適合的框架
- 在不需另外建立專案的前提下學習新的框架
- 和使用不同框架的人協作
- 逐漸將既有網站遷移到另一個框架，不需停機時間
:::

## 建立島嶼

Astro 預設會將所有 UI 元件渲染成靜態的 HTML 與 CSS，**自動移除所有客戶端的 JavaScript**。

```astro title="src/pages/index.astro"
<MyReactComponent />
```

聽起來有點嚴格，但正是這行為讓 Astro 網站預設即迅速，避免開發者不小心傳送不必要或不想要的 JavaScript，進而拖慢網站效能。

如果要把靜態 UI 元件轉換成互動式島嶼，只需加上 `client*` 指令即可。Astro 會自動構建、打包客戶端 JavaScript，並為其優化效能。

```astro title="src/pages/index.astro" ins="client:load"
<!-- 這個元件現在可以在頁面上互動了！網站其餘部分則維持靜態。 -->
<MyReactComponent client:load />
```

以 `client*` 指令標記可互動元件後，島嶼的客戶端 JavaScript 才會載入。

能否互動是以元件為等級設定，因此你可以根據各元件的用途決定不同的載入優先順序。舉例來說，`client:idle` 讓元件等到瀏覽器閒置時才載入，而 `client:visible` 則會使元件等到進入可視區域時才載入。

## 群島的優勢是什麼？

使用 Astro 群島建立網站最顯著的優勢就是效能：大部分網站內容都會轉換成快速、靜態的 HTML，而 JavaScript 只會在個別所需的元件中載入。JavaScript 是其中一個載入速度最慢的資源，所以每個 Byte 都要斤斤計較。

另一個優勢是平行載入。如上面的例子所闡釋，低優先度的「圖片輪播」不需要阻擋到高優先度的「頁首島嶼」。兩個平行載入且獨立注水，就表示頁首可以立即互動，而不用等待較肥大的圖片輪播拖慢整個網頁。

更棒的是，你可以明確告訴 Astro 如何、何時渲染各個元件。如果載入圖片輪播的成本較高，你可以附加特殊的[客戶端指令](/zh-tw/reference/directives-reference/#client-directives)，告訴 Astro：當輪播在頁面上可見時才會載入，如果使用者不會看到那就不會載入。

身為開發人員，你可以明確告訴 Astro，頁面的哪些元件需要在瀏覽器上執行。Astro 會確實為需要的地方注水，讓網站其他部分維持靜態 HTML。

**群島是讓 Astro 效能達到預設即迅速的秘密武器！**
